<template>
  <div style="width: 100%">
    <!-- 仅展示文字 -->
    <span v-if="displayOnly">
      <el-tag type="info" effect="plain">
        {{ getLabel(modelValue) }}
      </el-tag>
    </span>


    <!-- 下拉选择模式 -->
    <el-select
        v-else
        v-model="proxyValue"
        placeholder="请选择"
        clearable
        style="width: 100%"
    >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="!item.status"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import {ref, watch, onMounted} from "vue"
import {dicApi} from "@/api/core"
import {LabelValueStatus} from "@/types/api";

const props = defineProps<{
  modelValue: any
  displayOnly?: boolean
  dicTypeCode: string
}>()

const emit = defineEmits(["update:modelValue"])

const proxyValue = ref(props.modelValue)
const options = ref<LabelValueStatus[]>([])

watch(() => props.modelValue, val => proxyValue.value = val)
watch(proxyValue, val => emit("update:modelValue", val))

const getLabel = (val: any) => {
  const item = options.value.find(item => String(item.value) === String(val))
  return item ? item.label : val
}

const loadOptions = () => {
  dicApi.getDicData(props.dicTypeCode).then((res) => {
    options.value = res.data || []
  })
}

onMounted(loadOptions)
</script>
